<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1','2', '3']" router>
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>终端配置</template>
          <el-menu-item-group>
            <template slot="title"></template>
            <el-menu-item index="/map">终端地图</el-menu-item>
            <el-menu-item index="/home">摄像头配置</el-menu-item>
          </el-menu-item-group>
          <el-menu-item index="delcam">删除终端</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>数据管理</template>
          <el-menu-item index="list">摄像头数据</el-menu-item>
          <!-- <el-menu-item index="/statistic_chart">统计图表</el-menu-item> -->
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-setting"></i>视频查看</template>
          <el-menu-item-group>
            <template slot="title"></template>
            <el-menu-item index="liveview">实时浏览</el-menu-item>
            <el-menu-item index="review">录像视频</el-menu-item>
            <el-menu-item index="live">多路播放</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-main>
        <div>
          <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
            <!--缩放-->
            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
            <!--定位-->
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true">
            </bm-geolocation>
            <!--点-->
            <bm-marker :position="map.center" :dragging="map.dragging" animation="BMAP_ANIMATION_DROP">
              <!--提示信息-->
              <!-- <bm-info-window :show="map.show"></bm-info-window> -->
            </bm-marker>
          </baidu-map>
        </div>
      </el-main>
      <el-footer style="text-align: center; font-size: 10px">
        版权所有 © 雷佳千
      </el-footer>
    </el-container>
  </el-container>

</template>
<script>
  export default {
    name: "map",
    data: () => ({
      map: {
        center: {
          lng: 121.4472540000,
          lat: 31.3236200000
        },
        zoom: 15,
        show: true,
        dragging: true
      },
    }),
    methods: {
      handler({
        BMap,
        map
      }) {
        let me = this;
        console.log(BMap, map)
        // 鼠标缩放
        map.enableScrollWheelZoom(true);
        // 点击事件获取经纬度
        map.addEventListener('click', function (e) {
          console.log(e.point.lng, e.point.lat)
        })
      }
    }
  }

</script>

<style scoped>
  .map {
    width: 100%;
    height: 400px;
  }

</style>
